/**
 * Entry of basic styles
 */

@import './var.less';
@import './normalize.less';
@import './animation.less';
@import './mixins/clearfix.less';
@import './mixins/ellipsis.less';
@import './mixins/hairline.less';

@textColor : white,
black,
gray,
red,
orange,
green,
cyan,
blue,
purple,
magenta,
aqua,
lime;

.text-color-classes(@i: length(@textColor)) when (@i > 0) {
  .text-color-classes(@i - 1);
  @color: extract(@textColor, @i);

  .@{color}-text {
    color: @color  !important;
  }
}

.vcu-clearfix {
  .clearfix();
}


.vcu-fl {
  float: left;
}

.vcu-fr {
  float: right;
}

.vcu-text-left {
  text-align: left
}

.vcu-text-right {
  text-align: right
}

.vcu-text-center {
  text-align: center
}

.vcu-ellipsis {
  .ellipsis();
}

.vcu-multi-ellipsis--l2 {
  .multi-ellipsis(2);
}

.vcu-multi-ellipsis--l3 {
  .multi-ellipsis(3);
}

.vcu-safe-area-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

[class*='vcu-hairline'] {
  &::after {
    .hairline();
  }
}

.vcu-hairline {

  &,
  &--top,
  &--left,
  &--right,
  &--bottom,
  &--surround,
  &--top-bottom {
    position: relative;
  }

  &--top::after {
    border-top-width: @border-width-base;
  }

  &--left::after {
    border-left-width: @border-width-base;
  }

  &--right::after {
    border-right-width: @border-width-base;
  }

  &--bottom::after {
    border-bottom-width: @border-width-base;
  }

  &,
  &-unset {
    &--top-bottom::after {
      border-width: @border-width-base 0;
    }
  }

  &--surround::after {
    border-width: @border-width-base;
  }
}


.text-color-classes();